<template>
  <a-scrollbar>
    <a-form
      v-model="config"
      size="mini"
      label-align="right"
      layout="horizontal"
      :label-col-props="labelColProps"
      :wrapper-col-props="wrapperColProps"
    >
      <a-form-item
        field="model"
        tooltip=""
        label="组件类型"
      >
        <a-tag color="arcoblue" bordered>
          {{ config.name }}
        </a-tag>
      </a-form-item>
      <a-form-item
        field="model"
        tooltip=""
        label="表单ID"
      >
        <a-input v-model="config.id" readonly />
      </a-form-item>
      <a-form-item
        field="label"
        tooltip=""
        label="标签文本"
      >
        <a-input v-model="config.itemConfig.label" allow-clear />
      </a-form-item>
      <a-form-item
        field="labelColFlex"
        tooltip="单位px"
        label="标签宽度"
      >
        <a-input-number
          v-model="config.itemConfig.labelColFlex"
          mode="button"
          allow-clear
          :max="99999"
          :min="0"
        />
      </a-form-item>
      <a-form-item
        field="tooltip"
        tooltip=""
        label="标签提示"
      >
        <a-input v-model="config.itemConfig.tooltip" allow-clear />
      </a-form-item>
      <a-form-item
        field="showColon"
        tooltip=""
        label="是否必填"
      >
        <a-switch
          v-model="config.itemConfig.required"
          type="round"
        >
          <template #checked>
            必填
          </template>
          <template #unchecked>
            非必填
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="ruleType"
        tooltip=""
        label="校验值类型"
      >
        <a-select v-model="config.itemConfig.ruleType" allow-clear popup-container="#ItemSetting">
          <a-option value="string">字符串</a-option>
          <a-option value="number">数字</a-option>
          <a-option value="boolean">布尔</a-option>
          <a-option value="array">数组</a-option>
          <a-option value="object">对象</a-option>
          <a-option value="email">邮箱</a-option>
          <a-option value="url">RUL</a-option>
          <a-option value="ip">IP</a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="ruleMessage"
        tooltip=""
        label="校验失败提示"
      >
        <a-input v-model="config.itemConfig.ruleMessage" allow-clear />
      </a-form-item>
      <a-form-item
        field="ruleMatch"
        tooltip=""
        label="正则表达式"
      >
        <a-input v-model="config.itemConfig.ruleMatch" allow-clear />
      </a-form-item>
      <a-form-item
        field="validateTrigger"
        tooltip=""
        label="触发校验事件"
      >
        <a-select v-model="config.itemConfig.validateTrigger" allow-clear popup-container="#ItemSetting">
          <a-option value="change">change</a-option>
          <a-option value="input">input</a-option>
          <a-option value="focus">focus</a-option>
          <a-option value="blur">blur</a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        field="feedback"
        tooltip=""
        label="反馈图标"
      >
        <a-switch
          v-model="config.itemConfig.feedback"
          type="round"
        >
          <template #checked>
            显示
          </template>
          <template #unchecked>
            不显示
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="showColon"
        tooltip=""
        label="显示冒号"
      >
        <a-switch
          v-model="config.itemConfig.showColon"
          type="round"
        >
          <template #checked>
            显示
          </template>
          <template #unchecked>
            不显示
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="showColon"
        tooltip=""
        label="星号位置"
      >
        <a-switch
          v-model="config.itemConfig.asteriskPosition"
          type="round"
          :checked-value="'start'"
          :unchecked-value="'end'"
        >
          <template #checked>
            前
          </template>
          <template #unchecked>
            后
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="showColon"
        tooltip=""
        label="隐藏标签"
      >
        <a-switch
          v-model="config.itemConfig.hideLabel"
          type="round"
        >
          <template #checked>
            隐藏
          </template>
          <template #unchecked>
            显示
          </template>
        </a-switch>
      </a-form-item>
      <a-form-item
        field="showColon"
        tooltip=""
        label="隐藏星号"
      >
        <a-switch
          v-model="config.itemConfig.hideAsterisk"
          type="round"
        >
          <template #checked>
            隐藏
          </template>
          <template #unchecked>
            显示
          </template>
        </a-switch>
      </a-form-item>
      <a-divider style="border-bottom-style: dotted" orientation="center" :size="2" :margin="0">
        组件设置
      </a-divider>
      <br />
      <slot></slot>
    </a-form>
  </a-scrollbar>
</template>

<script lang="ts" setup>
import { defineModel } from 'vue';
import { labelColProps, wrapperColProps } from './config';

const config = defineModel('config');
</script>

<script lang="ts">
export default {
  name: 'FormItemSetting'
};
</script>

<style scoped>

</style>